<template>
	<view class="w-100">
			<view class="flex-1 border order-item mb-3">
				<view class="flex-x p-3">
					<view class="flex-1 row-ac">
						<view class="font-s-35 flex-1 in1line">订单号:{{ orderdetails.order_number }}</view>
						<view class="pay-status ml-2 font-s-3" v-if="orderdetails.is_paid">已付款</view>
						<view class="pay-status ml-2 font-s-3" v-else>未付款</view>
					</view>
					<view class="flex-1 mt-2">
						<view class="flex-1 d-f mb-2" v-for="pro in orderdetails.items" :key="pro.id">
							<view class="pro-img">
								<image :src="pro.product.image_list[0].url" mode=""></image>
							</view>
							<view class="flex-1 ml-2">
								<view class="flex-1 row-ac">
									<view class="font-s-35 flex-1 in1line">{{ pro.product.product_name }}</view>
									<view class="font-s-35 text-muted">{{ pro.product.price }}</view>
								</view>
								<view class="row-ac mt-1 font-s-3 text-muted">
									<view class="row-ac flex-1">
										<view class="mt-1 font-s-3 text-muted"
										v-if="pro.product.spec !== null">
											{{ pro.spec }}
										</view>
										<view class="ml-4">*</view>
										<view class="ml-1">{{ pro.quantity }}</view>
									</view>
									<view>￥{{ pro.product.price * pro.quantity }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-1 mt-3">
						<view class="flex-1 font-s-3 text-muted mt-2">
							订单用户:{{ orderdetails.nickname || orderdetails.username }}
						</view>
						<view class="flex-1 font-s-3 text-muted mt-2">收货人:{{ orderdetails.consignee }}</view>
						<view class="flex-1 font-s-3 text-muted mt-2">联系电话:{{ orderdetails.phone }}</view>
						<view class="flex-1 font-s-3 text-muted mt-2">
							发货方式:{{ orderdetails.shipping_method | shippingMethod }}</view>
						<view class="flex-1 font-s-3 text-muted mt-2">
							发货状态:
							<text v-if="orderdetails.freight_stata == true" class="freight-stata">已发货</text>
							<text v-else>未发货</text>
						</view>
						<view class="flex-1 font-s-3 text-muted mt-2 row-ac">
							<view class="flex-1 mr-2">收货地址:
								{{ orderdetails.province_name }}{{ orderdetails.city_name }}{{ orderdetails.district_name }}{{ orderdetails.address }}
							</view>
							<view class="ml-4 copy-box" @click="paste(orderdetails)">复制</view>
						</view>
						<view class="flex-1 font-s-3 text-muted mt-2">报单时间:{{ orderdetails.created_time }}</view>
		
					</view>
					<view class="flex-1 mt-3 row-ac">
						<view class="font-s-4 flex-1">实付金额:<text
								class="font-s-45">￥{{ orderdetails.order_amount }}</text>
						</view>
						<view class="freight-query" v-if="orderdetails.freight_stata == true" @click="toFast(orderdetails)">查看物流
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import { orderDetailUrl } from "@/api/index.js"
	export default {
		data() {
			return {
				orderdetails:''
			}
		},
		filters: {
			shippingMethod(status) {
				if (status === 0) {
					return '平台发货'
				} else if (status === 1) {
					return '自营'
				} else if (status === 2) {
					return '代发货'
				}
			},
		},
		onLoad(options) {
			this.getOrderDetail(options.orderId)
		},
		methods:{
			getOrderDetail(orderId) {
				this.$R.get(orderDetailUrl + orderId + '/').then(res => {
					if (res.code == 200) {
						this.orderdetails = res.data
						console.log(this.orderdetails);
					}
				})
			},
			paste(item) {
				uni.setClipboardData({
					data: '收货人:' + item.consignee + '，' + '联系电话:' + item.phone + ',' + '地址:' + item.province_name +
						item.city_name + item.district_name + item.address
				});
			},
			toFast(orderdetails) {
				console.log(orderdetails);
				uni.navigateTo({
					url: '/pages/order/fast-mail?freightNumber=' + orderdetails.freight_number + '&orderId=' + orderdetails.id
				});
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		background-color: #f7f7f7;
	
		.pro-img {
			width: 100rpx;
			height: 100rpx;
	
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	
		.pay-status {
			padding: 6rpx 10rpx;
			border: 1rpx solid #333;
		}
	
		.receipt-box {
			width: 152rpx;
			height: 72rpx;
			background-color: #000;
			color: #fff;
		}
	}
</style>